<template>
	<view class="">
		<view class="navbar-fixed" :style="{background:navBg ? bgColor:''}">
			<!-- 状态栏小程序撑起高度 -->
			<view :style="{height:navConfig.statusBarHeight+'px'}"></view>
			<view class="navbar-content border-b" :style="{height:navConfig.navBarHeight+'px'}">
				<view class="navbar-search">
					<!-- 返回按钮 -->
					<view class="left-icon" v-if="navBack" @click="ReturnToPrevious">
						<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
					</view>
					<!-- 中间部分插槽，用于放输入框， -->
					<view class="searchBox" :style="{marginRight:(navConfig.btnWidth+15)+'px' }" v-if="$slots.searchSlot">
						<slot name="searchSlot"></slot>
					</view>
					<!-- 搜索框 -->
					<view class="searchBox" @click="searchClick" :style="{marginRight:(navConfig.btnWidth+15)+'px' }" v-if="search">
						<input type="text" :disabled="disabled" :value="value" @input="inputChange" :placeholder="placeholder" class="searchInpush" />
						<view class="clneIcong" v-if="value" @click="clneData">
							<u-icon name="close" color="#fff" size="10"></u-icon>
						</view>
					</view>
					<!-- 标题 -->
					<text class="navbar-search_text" v-if="title && !$slots.title">{{title || ''}}</text>
					<!-- 标题插槽 -->
					<slot name="title" v-if="$slots.title"></slot>
				</view>
			</view>
		</view>
		<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
		<view v-if="ishowZw" :style="{height:navConfig.statusBarHeight+navConfig.navBarHeight+'px'}"></view>
	</view>
</template>

<script>
	/**
	 * 支持的插槽
	 * searchSlot 搜索插槽，插槽父容器已固定宽度
	 * title  标题插槽
**/
	export default {
		props: {
			/** 标题*/
			title: {
				type: String,
				default: ''
			},
			/**是否显示返回按钮*/
			navBack:{
				type:Boolean,
				default:false
			},
			/**导航栏背景颜色*/
			navBg:{
				type:Boolean,
				default:false
			},
			/**背景颜色*/
			bgColor:{
				type: String,
				default: 'var(--color-primary)'
			},
			/**是否需要占位容器。默认导航栏是固定定位的，如果没有占位容器的话，内容区域会靠在最顶部*/
			ishowZw: {
				type: Boolean,
				default: true
			},
			// 是否开启搜索，开启这个就不要传其它的
			search: {
				type: Boolean,
				default: false
			},
			// 搜索输入框的占位内容
			placeholder:{
				type: String,
				default: '请输入'
			},
			// 输入框是否禁用
			disabled:{
				type:Boolean,
				default:false
			},
			// 当开启搜索时用于双向绑定
			value:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				navConfig:{
					
				}
			}
		},
		mounted() {
			let obj = {}
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			obj.statusBarHeight = info.statusBarHeight
			obj.windowWidth = info.windowWidth
		
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			obj.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
			obj.btnRight = menuButtonInfo.right
			obj.btnWidth = menuButtonInfo.width
			this.navConfig = obj
		},
		methods: {
			searchClick(){
				this.$emit('searchClick')
			},
			clneData(){
				this.$emit('input','')
			},
			inputChange(e){
				const value = e.detail.value
				this.$emit('input',value)
			},
			ReturnToPrevious() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss"  scoped>
	.navbar-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8888888;
		width: 100%;
		transition: all 0.3s;

		.navbar-content {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 45px;
			box-sizing: border-box;

			.navbar-search {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				// padding: 0 10px;
				width: 100%;
				height: 30px;
				.left-icon{
					position: absolute;
					left: 20rpx;
				}

				.navbar-search_text {
					font-size: 30rpx;
					font-weight: 600;
					color: #fff;
					transition: all 0.3s;
				}
			}
		}

	}

	.navbar-fixed.actve {
		background: #fff;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.1);
		.navbar-search_text {
			color: #000 !important;
		}
	}
	.searchBox{
		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		margin-left: 72rpx;
		.clneIcong{
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 20rpx;
			width: 35rpx;
			height: 35rpx;
			border-radius: 50%;
			background: rgba(0, 0, 0, 0.2);
			z-index: 99999999999;
		}
	}
	.searchInpush{
		background: #fff;
		width: 100%;
		height: 98%;
		border-radius: 40rpx;
		padding: 0 25rpx;
		font-size: 28rpx;
	}
</style>